<template>
  <div>
    <div>
      <el-button class="backbutton" type="danger" @click="back">
        <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
        返回
      </el-button>
    </div>
    <div class="table">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        size="large"
      >
        <!-- <el-form-item label="id" prop="userId" class="margin">
          <el-input v-model="ruleForm.userId" :disabled="true"></el-input>
        </el-form-item> -->

        <el-form-item label="用户昵称" prop="userName" class="margin">
          <el-input
            v-model="ruleForm.userName"
            disabled
            style="width: 400px"
          ></el-input>
        </el-form-item>

        <el-form-item label="用户性别" prop="userGender" class="margin">
          <span>
            <el-select v-model="ruleForm.userGender">
              <el-option label="男" :value="true"></el-option>
              <el-option label="女" :value="false"></el-option>
            </el-select>
          </span>
        </el-form-item>
        <el-form-item label="用户邮箱" prop="userEmail" class="margin">
          <el-input
            v-model="ruleForm.userEmail"
            style="width: 400px"
          ></el-input>
        </el-form-item>

        <el-form-item label="特长" prop="userSpecialty" class="margin">
          <el-input
            v-model="ruleForm.userSpecialty"
            style="width: 400px"
          ></el-input>
        </el-form-item>
        <el-form-item label="个人介绍" prop="userIntroduction" class="margin">
          <el-input
            v-model="ruleForm.userIntroduction"
            style="width: 400px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()" class="button1"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')" class="button2"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { ElMessage } from "element-plus";
export default {
  name: "userEditInformation",
  data() {
    return {
      ruleForm: {
        userId: "",
        userName: "",
        userEmail: "",
        userGender: "",
        userSpecialty: "",
        userIntroduction: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        userEmail: [
          { required: true, message: "请输入用户邮箱", trigger: "blur" },
        ],
        userGender: [
          { required: true, message: "请选择用户性别", trigger: "change" },
        ],
        userSpecialty: [
          { required: true, message: "请输入用户特长", trigger: "blur" },
        ],
        userIntroduction: [
          { required: true, message: "请输入个人介绍", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.findUserByToken();
  },
  methods: {
    findUserByToken() {
      request
        .get("/secure/getUserInfo")
        .then((res) => {
          this.ruleForm.userId = res.data.id;
          this.ruleForm.userName = res.data.username;
          this.ruleForm.userEmail = res.data.email;
          this.ruleForm.userGender = res.data.gender;
          this.ruleForm.userSpecialty = res.data.specialty;
          this.ruleForm.userIntroduction = res.data.introduction;
        })
        .catch((err) => {
          console.log(err);
          alert("获取信息失败");
        });
    },
    back() {
      this.$router.back();
    },
    //传新的用户信息修改
    //提交完考虑更新session的值
    submitForm() {
      request
        .post("/users/update", {
          id: this.ruleForm.userId,
          name: this.ruleForm.userName,
          email: this.ruleForm.userEmail,
          gender: this.ruleForm.userGender,
          specialty: this.ruleForm.userSpecialty,
          introduction: this.ruleForm.userIntroduction,
        })
        .then((res) => {
          //更新session储存的值
          if (res.code == 200) {
            ElMessage({
              showClose: true,
              message: "修改成功",
              type: "success",
            });
          } else {
            ElMessage({
              showClose: true,
              message: "修改失败",
              type: "error",
            });
          }
        })
        .catch((error) => {
          ElMessage({
            showClose: true,
            message: "修改失败",
            type: "error",
          });
          console.log(err);
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.table {
  background: #ffffffdd;
  height: 88%;
  position: relative;
  border-radius: 10px;
  padding-top: 75px;
  margin-left: 30%;
}
.margin {
  width: 320px;
}
.button1 {
  width: 60px;
  margin-left: 0%;
}
.button2 {
  width: 60px;
  margin-left: 100px;
}
.backbutton {
}
</style>
